<template>
	<div class="comment-item">
		<van-cell>
			<van-image 
				slot="icon" 
				:src="comment.aut_photo"
				class="avatar"
				round
				fit="cover"
			/>
			<div slot="title" class="title">{{comment.aut_name}}</div>
			<div slot="label" class="info">
				<span class="content">{{comment.content}}</span>
				<div class="bottom-wrap">
					<div class="pubdate">{{comment.pubdate|datetime}}</div>
					<van-button
						v-if="reply"
						size="mini"
						type="default"
						class="reply-btn"
						round
						@click="$emit('postComment')"
					>
					{{comment.reply_count}}回复</van-button>
				</div>
			</div>
			<div slot="right-icon" class="rightPath">
				<van-icon 
				slot="right-icon" 
				:name="comment.is_liking?'good-job':'good-job-o'" 
				:color="comment.is_liking?'orange':''"
				class="like" 
				@click="handleLike(comment)"></van-icon>
				<span>{{comment.is_liking?'已赞':'赞'}}</span>
			</div>
			
		</van-cell>
	</div>
</template>

<script>
	import {commentLike,unCommentLike} from '@/api/user.js'
	import {mapMutations} from 'vuex'
	export default {
		name:'commentItem',
		props:{
			comment:{
				type:Object,
				required:true
			},
			reply:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {}
		},
		methods:{
			...mapMutations(['showCurrentReply']),
			async handleLike(comment){
				try{
					if(comment.is_liking){
						await unCommentLike(comment.com_id)
					}else{
						await commentLike(comment.com_id)
					}
					//更新视图
					comment.is_liking = !comment.is_liking
					
				}catch(err){
					console.log(err)
					this.$toast.fail('操作失败')
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.comment-item{
		.avatar{
			width:36px;
			height:36px;
			margin-right:15px;
		}
		.title{
			font-size:14px;
			font-weight:600;
		}
		/deep/ .van-cell__label{
			margin:unset;
		}
		.info{
			padding:15px 0;
		}
		.content{
			font-size:16px;
			color:#222;
			
		}
		.bottom-wrap{
			display:flex;
			align-items:center;
			margin-top: 15px;
			.pubdate{
				font-size: 12px;
				margin-right: 15px;
				
			}
		}
		.rightPath{
			display:flex;
			flex-wrap: nowrap;
			align-items: flex-start;
			justify-content: flex-end;
		}
		.like{
			font-size:20px;
		}
	}
</style>
